<template>
  <div class="contIndexClass">
    <div class="headClass">
      <div class="head_left">
        <img class="headlogoClass" src="@/assets/logo.png" alt="" />
        <div class="headtab" v-show="showtab">
          <van-tabs
            v-model="activeName"
            background="#0A1126"
            color="#707070"
            title-active-color="white"
            borde
            @change="changeOptionaa"
          >
            <!-- <van-tab
              :name="item.value"
              v-for="item in option1"
              :key="item.text"
              :title="item.text"
            /> -->
            <van-tab :title="option1[0].text"></van-tab>
            <van-tab :title="option1[1].text"></van-tab>
            <van-tab :title="option1[2].text"></van-tab>
            <van-tab  :title="option1[3].text"></van-tab>
            <van-tab  :title="option1[4].text"></van-tab>
            <van-tab  :title="option1[5].text"></van-tab>
            <van-tab  :title="option1[6].text"></van-tab>
            <van-tab  :title="option1[7].text"></van-tab>
            <van-tab :title="option1[8].text"></van-tab>
          </van-tabs>
        </div>
      </div>
      <van-dropdown-menu v-if="!showtab">
        <van-dropdown-item
          v-model="value1"
          @change="changeOption"
          :options="option1"
        />
      </van-dropdown-menu>
      <div class="head_right" @click="qiehuan">
        <img class="headlogoClass" src="@/assets/fanyi.png" alt="" />
        {{ zhEn ? "EN" : "CN" }}
      </div>
    </div>

    <section class="xinxi">
      <img class="bg" src="@/assets/bg.png" alt="" />
      <div class="neijj">
        <div class="djs">
          <div class="djs_left">
            <img src="@/assets/san.png" alt="" />
            <span>{{ jianjie.title }}</span>
          </div>
          <div class="djs_right">
            <div class="timeson">
              <div class="shu">{{ day }}</div>
              <div class="danwei">{{ jianjie.days }}</div>
            </div>
            <div class="timeson">
              <div class="shu">{{ time }}</div>
              <div class="danwei">{{ jianjie.hour }}</div>
            </div>
            <div class="timeson">
              <div class="shu">{{ fenzhong }}</div>
              <div class="danwei">{{ jianjie.minu }}</div>
            </div>
            <div class="timeson">
              <div class="shu">{{ miao }}</div>
              <div class="danwei">{{ jianjie.miao }}</div>
            </div>
          </div>
        </div>
        <div class="title">ZKS</div>
        <div class="neirong">
          {{ jianjie.jj }}
        </div>
        <div class="btn">
          <van-button
            color="#2EA1FF"
            :style="{ color: '#000' }"
            style="
              margin-right: 48px;
              margin-bottom: 10px;
              border-radius: 8px;
              font-weight: 600;
            "
            @click="kongtou('vital1')"
            >{{ jianjie.btna }}</van-button
          >
          <van-button
            color="#2EA1FF"
            :style="{ color: '#000' }"
            style="font-weight: 600; border-radius: 8px"
            @click="kongtou('vital2')"
            >{{ jianjie.btnb }}</van-button
          >
        </div>
      </div>

      <div class="box">
        <van-steps
          inactive-icon="https://njyyl.oss-cn-hangzhou.aliyuncs.com/sh/dian.png"
          active-icon="https://njyyl.oss-cn-hangzhou.aliyuncs.com/sh/dian.png"
          direction="vertical"
          active-color="#2EA1FF"
        >
          <van-step>
            <div class="hezi fd" style="margin-top: -20px" id="airdrop">
              <div class="imgx">
                <img src="@/assets/x.png" alt="" />
              </div>
              <div>
                <div class="shuju">
                  <span class="name">ZKS</span>
                  <img src="@/assets/ok.png" alt="" />
                  <van-button
                    color="#2EA1FF"
                    :style="{ color: '#000' }"
                    style="font-weight: 600; border-radius: 8px"
                    url="https://twitter.com/zks_one"
                    id="vital1"
                    >{{ xinxiZou.x.guanzhu }}</van-button
                  >
                </div>
                <div class="bq">ZKS Airdrop</div>

                <div class="from">
                  <!-- 领取空投前   开始-->

                  <div class="zi" style="margin-bottom: 10px">
                    <span class="yinwen" style="font-size: 12px">
                      {{ xinxiZou.x.followers }}
                    </span>
                  </div>
                  <div class="from_left">
                    <div>
                      <input
                        class="put"
                        type="text"
                        :placeholder="xinxiZou.x.zfcp"
                      />
                    </div>
                    <div>
                      <input
                        class="put jj"
                        type="text"
                        :placeholder="xinxiZou.x.zhanghao"
                      />
                    </div>
                    <van-button
                      color="#2EA1FF"
                      :style="{ color: '#000' }"
                      style="
                        font-weight: 600;
                        width: 160px;
                        border-radius: 8px;
                        margin-bottom: 60px;
                      "
                      >{{ xinxiZou.x.tijiao }}</van-button
                    >
                  </div>

                  <!-- 领取空投前   结束-->

                  <!-- 空投后   开始-->

                  <div class="zi">
                    <span class="yinwen" style="font-size: 12px">
                      {{ xinxiZou.x.jilu }}
                    </span>
                  </div>
                  <div class="from_right">
                    <div class="gradient-border">
                      <div class="son content">
                        <span>{{ xinxiZou.x.yue }}</span>
                        <span class="son_sj">4000.00</span>
                      </div>
                    </div>
                    <div class="gradient-border">
                      <div class="son content">
                        <span>{{ xinxiZou.x.renshu }}</span>
                        <span class="son_sj">0</span>
                      </div>
                    </div>
                    <div class="son">
                      <span>{{ xinxiZou.x.jiangli }}</span>
                      <span class="son_sj">0.00</span>
                    </div>
                    <div class="yaoqing">
                      <img src="@/assets/fx.png" alt="" />
                      <span>{{ xinxiZou.x.lianjie }}： </span>
                      <span style="color: #aaaaaa"> https://zks.one</span>
                      <div
                        style="display: flex; align-items: center"
                        @click="onCopy('https://zks.one')"
                      >
                        <img
                          src="@/assets/fz.png"
                          alt=""
                          style="margin-left: 5px"
                        />
                      </div>
                    </div>
                    <van-button
                      color="#2EA1FF"
                      :style="{ color: '#000' }"
                      style="
                        font-weight: 600;
                        margin-bottom: 60px;
                        border-radius: 8px;
                      "
                      >{{ xinxiZou.x.tibi }}</van-button
                    >
                  </div>
                  <div class="jilu">
                    <div class="jl_header">
                      <img src="@/assets/tx.png" alt="" />
                      <span class="title" style="font-size: 18px">{{
                        xinxiZou.x.ywjilu
                      }}</span>
                    </div>
                    <div class="jlbox">
                      <div class="jlson">
                        <img src="@/assets/add.png" alt="" />
                        <div>
                          <div class="jltime">2023-06-12 12:00</div>
                          <div class="ma">
                            (mjtcal3wuhdeduvlf6zuvldneriged7eoo)
                          </div>
                        </div>
                      </div>
                      <div class="jlson">
                        <img src="@/assets/add.png" alt="" />
                        <div>
                          <div class="jltime">2023-06-12 12:00</div>
                          <div class="ma">
                            (mjtcal3wuhdeduvlf6zuvldneriged7eoo)
                          </div>
                        </div>
                      </div>
                      <div class="jlson">
                        <img src="@/assets/add.png" alt="" />
                        <div>
                          <div class="jltime">2023-06-12 12:00</div>
                          <div class="ma">
                            (mjtcal3wuhdeduvlf6zuvldneriged7eoo)
                          </div>
                        </div>
                      </div>
                      <div class="jlson">
                        <img src="@/assets/add.png" alt="" />
                        <div>
                          <div class="jltime">2023-06-12 12:00</div>
                          <div class="ma">
                            (mjtcal3wuhdeduvlf6zuvldneriged7eoo)
                          </div>
                        </div>
                      </div>
                      <div class="jlson">
                        <img src="@/assets/add.png" alt="" />
                        <div>
                          <div class="jltime">2023-06-12 12:00</div>
                          <div class="ma">
                            (mjtcal3wuhdeduvlf6zuvldneriged7eoo)
                          </div>
                        </div>
                      </div>
                      <div class="jlson">
                        <img src="@/assets/add.png" alt="" />
                        <div>
                          <div class="jltime">2023-06-12 12:00</div>
                          <div class="ma">
                            (mjtcal3wuhdeduvlf6zuvldneriged7eoo)
                          </div>
                        </div>
                      </div>
                      <div class="jlson">
                        <img src="@/assets/add.png" alt="" />
                        <div>
                          <div class="jltime">2023-06-12 12:00</div>
                          <div class="ma">
                            (mjtcal3wuhdeduvlf6zuvldneriged7eoo)
                          </div>
                        </div>
                      </div>
                      <div class="jlson">
                        <img src="@/assets/add.png" alt="" />
                        <div>
                          <div class="jltime">2023-06-12 12:00</div>
                          <div class="ma">
                            (mjtcal3wuhdeduvlf6zuvldneriged7eoo)
                          </div>
                        </div>
                      </div>
                      <div class="jlson">
                        <img src="@/assets/add.png" alt="" />
                        <div>
                          <div class="jltime">2023-06-12 12:00</div>
                          <div class="ma">
                            (mjtcal3wuhdeduvlf6zuvldneriged7eoo)
                          </div>
                        </div>
                      </div>
                      <div class="jlson">
                        <img src="@/assets/add.png" alt="" />
                        <div>
                          <div class="jltime">2023-06-12 12:00</div>
                          <div class="ma">
                            (mjtcal3wuhdeduvlf6zuvldneriged7eoo)
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 空投后   结束-->
                </div>
              </div>
            </div>
          </van-step>

          <van-step>
            <div class="hezi" style="margin-bottom: 122px" id="presale">
              <div class="maxtitle" id="vital2">
                {{ xinxiZou.yushou.title }}
              </div>
              <div class="jj">
                {{ xinxiZou.yushou.jieshao }}
              </div>

              <div class="jj">
                {{ xinxiZou.yushou.jiage }}
              </div>

              <div class="fz">
                <span class="ys">{{ xinxiZou.yushou.dizhi }}： </span>
                <span
                  class="ys"
                  style="color: white; font-size: 0.8em; background: #2ea1ff"
                  >0x07DC7726bD4427f2A4aEb279Ff2D220A179C2998</span
                >
                <div
                  style="display: flex; align-items: center"
                  @click="onCopy('0x07DC7726bD4427f2A4aEb279Ff2D220A179C2998')"
                >
                  <img src="@/assets/fz.png" alt="" />
                </div>
              </div>
              <div class="from quan">
                <div class="qson">
                  <div class="jltime">
                    <span>2023-06-12 12:00</span>
                    <span>[+0.78125000 BTC]</span>
                    <span>Success</span>
                  </div>
                  <div class="ma">00:09:10</div>
                </div>
                <div class="qson">
                  <div class="jltime">
                    <span>2023-06-12 12:00</span>
                    <span>[+0.78125000 BTC]</span>
                    <span>Success</span>
                  </div>
                  <div class="ma">00:09:10</div>
                </div>
                <div class="qson">
                  <div class="jltime">
                    <span>2023-06-12 12:00</span>
                    <span>[+0.78125000 BTC]</span>
                    <span>Success</span>
                  </div>
                  <div class="ma">00:09:10</div>
                </div>
                <div class="qson">
                  <div class="jltime">
                    <span>2023-06-12 12:00</span>
                    <span>[+0.78125000 BTC]</span>
                    <span>Success</span>
                  </div>
                  <div class="ma">00:09:10</div>
                </div>
                <div class="qson">
                  <div class="jltime">
                    <span>2023-06-12 12:00</span>
                    <span>[+0.78125000 BTC]</span>
                    <span>Success</span>
                  </div>
                  <div class="ma">00:09:10</div>
                </div>
                <div class="qson">
                  <div class="jltime">
                    <span>2023-06-12 12:00</span>
                    <span>[+0.78125000 BTC]</span>
                    <span>Success</span>
                  </div>
                  <div class="ma">00:09:10</div>
                </div>
                <div class="qson">
                  <div class="jltime">
                    <span>2023-06-12 12:00</span>
                    <span>[+0.78125000 BTC]</span>
                    <span>Success</span>
                  </div>
                  <div class="ma">00:09:10</div>
                </div>
                <div class="qson">
                  <div class="jltime">
                    <span>2023-06-12 12:00</span>
                    <span>[+0.78125000 BTC]</span>
                    <span>Success</span>
                  </div>
                  <div class="ma">00:09:10</div>
                </div>
                <div class="qson">
                  <div class="jltime">
                    <span>2023-06-12 12:00</span>
                    <span>[+0.78125000 BTC]</span>
                    <span>Success</span>
                  </div>
                  <div class="ma">00:09:10</div>
                </div>
                <div class="qson">
                  <div class="jltime">
                    <span>2023-06-12 12:00</span>
                    <span>[+0.78125000 BTC]</span>
                    <span>Success</span>
                  </div>
                  <div class="ma">00:09:10</div>
                </div>
              </div>

              <van-row
                type="flex"
                style="width: 80%; margin-top: 40px"
                justify="space-between"
              >
                <van-col :span="buzou">
                  <div class="kuang">
                    <div class="jd_name">{{ xinxiZou.yushou.one }}</div>
                    <div class="jd_jj">
                      {{ xinxiZou.yushou.oneNr }}
                    </div>
                  </div>
                </van-col>
                <van-col :span="buzou">
                  <div class="kuang">
                    <div class="jd_name">{{ xinxiZou.yushou.two }}</div>
                    <div class="jd_jj">
                      {{ xinxiZou.yushou.twoNr }}
                    </div>
                  </div>
                </van-col>
                <van-col :span="buzou">
                  <div class="kuang">
                    <div class="jd_name">{{ xinxiZou.yushou.three }}</div>
                    <div class="jd_jj">
                      {{ xinxiZou.yushou.threeNr }}
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </van-step>
          <van-step>
            <div class="hezi" style="margin-bottom: 122px">
              <div class="maxtitle">{{ xinxiZou.tokens.title }}</div>
              <div class="jj">
                {{ xinxiZou.tokens.jj }}
              </div>
              <div class="xmlist">
                <img src="@/assets/min1.png" alt="" />
                <div class="xmlist_right gradient-border">
                  <div class="son content">
                    <span>{{ xinxiZou.tokens.fuhao }}</span>
                    <span class="son_sj">ZKS</span>
                  </div>
                </div>
              </div>
              <div class="xmlist">
                <img src="@/assets/min2.png" alt="" />
                <div class="xmlist_right gradient-border">
                  <div class="son content">
                    <span>{{ xinxiZou.tokens.dizhi }}</span>
                    <span class="son_sj" style="font-size: 0.5em"
                      >0x07DC7726bD4427f2A4aEb279Ff2D220A179C2998</span
                    >
                  </div>
                </div>
              </div>
              <div class="xmlist">
                <img src="@/assets/min3.png" alt="" />
                <div class="xmlist_right gradient-border">
                  <div class="son content">
                    <span>{{ xinxiZou.tokens.shudian }}</span>
                    <span class="son_sj">18</span>
                  </div>
                </div>
              </div>
              <div class="xmlist">
                <img src="@/assets/min4.png" alt="" />
                <div class="xmlist_right gradient-border">
                  <div class="son content">
                    <span>{{ xinxiZou.tokens.fxl }}</span>
                    <span class="son_sj">1,000,000,000</span>
                  </div>
                </div>
              </div>
              <div class="xmlist">
                <img src="@/assets/min5.png" alt="" />
                <div class="xmlist_right gradient-border">
                  <div class="son content">
                    <span>{{ xinxiZou.tokens.qkl }}</span>
                    <span class="son_sj">ERC20</span>
                  </div>
                </div>
              </div>
            </div>
          </van-step>
          <van-step>
            <div class="hezi">
              <div class="maxtitle">{{ xinxiZou.map.title }}</div>
              <van-row type="flex" justify="space-between" style="width: 80%">
                <van-col :span="jd">
                  <div class="jd_name">{{ xinxiZou.map.one }}</div>
                  <div class="jd_time">{{ xinxiZou.map.oneTime }}</div>
                  <div class="jd_jj">
                    {{ xinxiZou.map.onejs }}
                  </div>
                </van-col>
                <van-col :span="jd">
                  <div class="jd_name">{{ xinxiZou.map.two }}</div>
                  <div class="jd_time">{{ xinxiZou.map.twoTime }}</div>
                  <div class="jd_jj">
                    {{ xinxiZou.map.twojs }}
                  </div>
                </van-col>
                <van-col :span="jd">
                  <div class="jd_name">{{ xinxiZou.map.three }}</div>
                  <div class="jd_time">{{ xinxiZou.map.threeTime }}</div>
                  <div class="jd_jj">
                    {{ xinxiZou.map.threejs }}
                  </div>
                </van-col>
                <van-col :span="jd">
                  <div class="jd_name">{{ xinxiZou.map.four }}</div>
                  <div class="jd_time">{{ xinxiZou.map.fourTime }}</div>
                  <div class="jd_jj">
                    {{ xinxiZou.map.fourjs }}
                  </div>
                </van-col>
              </van-row>
            </div>
          </van-step>
          <van-step>
            <template v-slot:inactive-icon>
              <van-icon name="" class="" />
            </template>
            <div class="biaoti">
              <h2>{{ xinxiZou.xinxi.titlea }}</h2>
              <h2>{{ xinxiZou.xinxi.titleb }}</h2>
              <p class="jianjie">
                {{ xinxiZou.xinxi.jj }}
              </p>
            </div>
          </van-step>
        </van-steps>
      </div>
    </section>

    <footer>
      <div class="imgs">
        <a href="https://twitter.com/zks_one"
          ><img src="@/assets/icon1.png" alt=""
        /></a>
        <a href="https://t.me/zks_one"
          ><img src="@/assets/icon2.png" alt=""
        /></a>
        <img src="@/assets/icon3.png" alt="" />
        <img src="@/assets/icon4.png" alt="" />
        <img src="@/assets/icon5.png" alt="" />
        <img src="@/assets/icon6.png" alt="" />
        <img src="@/assets/icon7.png" alt="" />
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "indexHome",
  data() {
    return {
      day: 0,
      time: 0,
      fenzhong: 0,
      miao: 0,
      activeName: "a",
      value1: 0,
      option1: [
        { text: "首页", value: 0 },
        { text: "空投", value: 1 },
        { text: "预售", value: 2 },
        { text: "ZKS API", value: 3 },
        { text: "zkEVM", value: 4 },
        { text: "Documentation", value: 5 },
        { text: "Javascript SDK", value: 6 },
        { text: "Hardhat plugins", value: 7 },
        { text: "zkSync CLI", value: 8 },
      ],
      jd: 6,
      buzou: 8,
      showtab: true,
      zhEn: true,
      jianjie: {
        title: "空投倒计时",
        days: "天",
        hour: "时",
        minu: "分",
        miao: "秒",
        jj: "ZKS是以太坊二层网络的分叉币。ZKS为以太坊网络的扩展提供解决方案，打造更高效的web3+AI+元宇宙的生态系统,推动去中心化金融领域一场前所未有的革命。",
        btna: "参与空投",
        btnb: "参与预售",
      },
      xinxiZou: {
        x: {
          guanzhu: "关注",
          followers:
            "关注ZKS官方推特后，输入ERC20地址和你的推特用户名（例如：0x9c762dc9733***EB1693B9e770E1f52 和 @elonmusk）并提交，参与空投活动。",
          zfcp: "输入ERC20地址,例如：0x9c762dc...",
          zhanghao: "输入推特账号,例如：@elonmusk",
          tijiao: "领取空投",
          yue: "余额",
          renshu: "邀请人数",
          jilu: "ZKS代币空投总数量2亿个,每人可以领取20,000ZKS;每邀请一位好友获得10,000ZKS奖励，最多邀请18位好友。系统AI机器人实时监控，如果发现作弊行为的账号，将取消空投资格。",
          ywjilu: "邀请记录",
          tibi: "提币",
          fuzhi: "点击复制",
          lianjie: "邀请链接",
          jiangli: "奖励",
        },
        yushou: {
          title: "ZKS预售",
          one: "空投详情",
          two: "预售规则",
          three: "预售方式",
          oneNr:
            "ZKS空投总数量200,000,000, 关注ZKS官方推特后，提交ETH钱包地址和推特账号名参与空投活动。邀请一位好友奖励10,000 ZKS代币,最多邀请18位好友。空投结束后，ZKS代币将自动发送到提交的ETH钱包地址。",
          twoNr:
            "ZKS预售总数量600,000,000; 预售价格：1 ETH = 2,000,000 ZKS; 最小购买0.1ETH，最大购买10ETH; 预售时间：2023-11-05 - 2023-12-05（UTC+8）;系统根据预售顺序发送ZKS代币，如果预售超过额度，未购买成功的ETH将原路退回。",
          threeNr:
            "复制预售地址0x07DC7726bD4427f2A4a Eb279Ff2D220A179C2998，使用ETH钱包将ETH转入预售ERC20地址。注意：勿使用交易所直接提币到预售地址，否则将无法收到ZKS代币。ETH转入到预售地址后，本页面会显示您的转账记录，对应数量的ZKS代币将在1小时内自动发放到您的ETH钱包。",
          jieshao:
            "使用您的钱包发送ETH到下面预售地址，我们系统将自动将相应数量的ZKS代币发送到您的钱包。预售结束后，将上线交易所并开启第一轮保价回购，ZKS的价值将会上升百倍！",
          dizhi: "预售地址",
          success: "成功",
          jiage: "预售价格：1 ETH = 2,000,000 ZKS",
        },
        tokens: {
          title: "ZKS经济模型",
          jj: "ZKS总量是1,000,000,000枚，空投奖励200,000,000枚，社区预售600,000,000枚，剩余200,000,000投入项目后续发展。空投结束后将上线交易所Uniswap、Binance、OKEX等。",
          fuhao: "代币符号",
          dizhi: "合约地址",
          shudian: "小数点",
          fxl: "发行量",
          qkl: "区块链",
        },
        map: {
          title: "路线图",
          one: "第一阶段",
          two: "第二阶段",
          three: "第三阶段",
          four: "第四阶段",
          oneTime: "2023年11月",
          twoTime: "2023年12月",
          threeTime: "2024年2月",
          fourTime: "2024年4月",
          onejs: "开始ZKS空投和预售，市场准备工作启动，大规模市场推广",
          twojs: "上线Uniswap交易所",
          threejs:
            "逐步上线主流交易所；去中心化，web3.0，AI集一体的去中心化平台开始构建",
          fourjs:
            "上线集合交易协议，上线抵押借贷平台，上线衍生活交易平台，更多功能持续上线",
        },
        xinxi: {
          titlea: "ZKS的网络协议",
          titleb: "共同构建以太坊的二层网络",
          jj: "来自CHAINLINK、Uniswap、SushiSwap、Aave、ARGENT、GNOSIS、CURVE和许多世界上最大的品牌的200多个项目已登记有意在ZKS上部署。探索使用以太坊和ZK技术塑造互联网的生态系统。",
        },
      },
    };
  },
  created() {
    this.daojishiFun();
  },
  methods: {
    changeOptionaa(options) {
      if (options == 1) {
        this.kongtou("vital1");
      } else if (options == 2) {
        this.kongtou("vital2");
      }else if (options == 3) {
        window.location.href="https://era.zksync.io/docs/api/api.html";
      }else if (options == 4) {
        window.location.href="https://www.encode.club/zksync-zkevm-bootcamp";
      }else if (options == 5) {
        window.location.href="https://era.zksync.io/docs/";
      }else if (options == 6) {
        window.location.href="https://era.zksync.io/docs/api/js/";
      }else if (options == 7) {
        window.location.href="https://era.zksync.io/docs/tools/hardhat/";
      }else if (options == 8) {
        window.location.href="https://era.zksync.io/docs/api/tools/zksync-cli/";
      }
    },
    changeOption(options) {
      console.log(options, "options");
      if (options == 1) {
        this.kongtou("vital1");
      } else if (options == 2) {
        this.kongtou("vital2");
      }else if (options == 3) {
        window.location.href="https://era.zksync.io/docs/api/api.html";
      }else if (options == 4) {
        window.location.href="https://www.encode.club/zksync-zkevm-bootcamp";
      }else if (options == 5) {
        window.location.href="https://era.zksync.io/docs/";
      }else if (options == 6) {
        window.location.href="https://era.zksync.io/docs/api/js/";
      }else if (options == 7) {
        window.location.href="https://era.zksync.io/docs/tools/hardhat/";
      }else if (options == 8) {
        window.location.href="https://era.zksync.io/docs/api/tools/zksync-cli/";
      }

      // this.inlineOption = options;
      // this.inlineOption.map((item) => {
      //   console.log(item.options.filter((obj) => obj.checked));
      // });
    },
    daojishiFun() {
      let that = this;
      let now = new Date();
      let end = new Date("2023/12/5 10:00:00");
      let leftTime = end.getTime() - now.getTime();
      let leftsecond = parseInt(leftTime / 1000);
      let day1 = Math.floor(leftsecond / (60 * 60 * 24));
      let hour = Math.floor((leftsecond - day1 * 24 * 60 * 60) / 3600);
      let minute = Math.floor(
        (leftsecond - day1 * 24 * 60 * 60 - hour * 3600) / 60
      );
      let second = Math.floor(
        leftsecond - day1 * 24 * 60 * 60 - hour * 3600 - minute * 60
      );
      that.day = day1;
      that.time = hour;
      that.fenzhong = minute;
      that.miao = second;
      setTimeout(that.daojishiFun, 1000);
    },
    onClick(index, title) {
      this.$toast(`${index} ${title}`);
      // if (index == 1) {
      //   console.log("走了嘛");
      //   this.kongtou("#vital1");
      // }
    },
    kongtou(selector) {
      let anchorElement = document.getElementById(selector);
      /*如果对应id的锚点存在，就跳转到锚点*/
      if(anchorElement) {
        anchorElement.scrollIntoView();
      }
    },
    qiehuan() {
      if (this.zhEn) {
        this.option1 = [
          { text: "Home", value: 0 },
          { text: "Airdrop", value: 1 },
          { text: "Pre-Sale", value: 2 },
          { text: "ZKS API", value: 3 },
          { text: "zkEVM", value: 4 },
          { text: "Documentation", value: 5 },
          { text: "Javascript SDK", value: 6 },
          { text: "Hardhat plugins", value: 7 },
          { text: "zkSync CLI", value: 8 },
        ];
        this.jianjie = {
          title: "Airdrop Countdown",
          days: "Days",
          hour: "Hour",
          minu: "Minu",
          miao: "Seco",
          jj: "ZKS is a fork of the second-layer Ethereum network. ZKS provides solutions for the expansion of the Ethereum network, creates a more efficient web3+AI+metaverse ecosystem, and promotes an unprecedented revolution in the field of decentralized finance.",
          btna: "Claim Airdrop",
          btnb: "Buy Pre-Sale",
        };
        this.xinxiZou = {
          x: {
            guanzhu: "Follow",
            followers:
              "After following the ZKS official Twitter, enter the ERC20 address and your Twitter username (for example: 0x9c762dc9733***EB1693B9e770E1f52 and @elonmusk) and submit to participate in the airdrop activity.",
            zfcp: "Enter the ERC20 address, for example: 0x9c762dc...",
            zhanghao: "Enter your Twitter account, for example: @elonmusk",
            tijiao: "Claim",
            yue: "Balance",
            renshu: "Number",
            jilu: "The total number of ZKS tokens airdropped is 200 million, and each person can receive 20,000 ZKS; each friend invited will receive 10,000 ZKS as a reward, and a maximum of 18 friends can be invited. The system AI robot monitors in real time. If an account with cheating behavior is found, the air investment qualification will be cancelled.",
            ywjilu: "Invitation record",
            tibi: "Withdraw",
            fuzhi: "Copy",
            lianjie: "Invitation link",
            jiangli: "Award",
          },
          yushou: {
            title: "ZKS Pre-sale",
            one: "Airdrop details",
            two: "Pre-sale rules",
            three: "Pre-sale method",
            oneNr:
              "The total amount of ZKS airdrop is 200,000,000. After following the ZKS official Twitter, submit your ETH wallet address and Twitter account name to participate in the airdrop event. Inviting a friend will reward you with 10,000 ZKS tokens, and you can invite up to 18 friends. After the airdrop ends, ZKS tokens will be automatically sent to the submitted ETH wallet address.",
            twoNr:
              "The total number of ZKS pre-sales is 600,000,000; pre-sale price: 1 ETH = 2,000,000 ZKS; minimum purchase 0.1 ETH, maximum purchase 10 ETH; pre-sale time: 2023-11-05 - 2023-12-05 (UTC+8); the system is based on the pre-sale ZKS tokens will be sent in the order of sale. If the pre-sale exceeds the quota, the ETH that was not purchased successfully will be returned to the original route.",
            threeNr:
              "Copy the pre-sale address 0x07DC7726bD4427f2A4a Eb279Ff2D220A179C2998, and use the ETH wallet to transfer ETH to the pre-sale ERC20 address. Note: Do not use the exchange to withdraw coins directly to the pre-sale address, otherwise you will not be able to receive ZKS tokens. After ETH is transferred to the pre-sale address, your transfer record will be displayed on this page, and the corresponding number of ZKS tokens will be automatically distributed to your ETH wallet within 1 hour.",
            jieshao:
              "Use your wallet to send ETH to the pre-sale address below, and our system will automatically send the corresponding number of ZKS tokens to your wallet. After the pre-sale ends, it will be listed on the exchange and the first round of guaranteed buyback will begin. The value of ZKS will increase a hundred times!",
            dizhi: "Pre-sale address",
            success: "success",
            jiage: "pre-sale price：1 ETH = 2,000,000 ZKS",
          },
          tokens: {
            title: "ZKS economic model",
            jj: "The total amount of ZKS is 1,000,000,000, with 200,000,000 as an airdrop reward, 600,000,000 as a community pre-sale, and the remaining 200,000,000 being invested in the subsequent development of the project. After the airdrop ends, it will be listed on exchanges Uniswap, Binance, OKEX, etc.",
            fuhao: "Token symbol",
            dizhi: "Contract address",
            shudian: "decimal",
            fxl: "Circulation",
            qkl: "Blockchain",
          },
          map: {
            title: "RoadMap",
            one: "Stage 1",
            two: "Stage 2",
            three: "Stage 3",
            four: "Stage 4",
            oneTime: "2023-11",
            twoTime: "2023-12",
            threeTime: "2024-2",
            fourTime: "2024-4",
            onejs:
              "ZKS airdrop and pre-sale started, market preparation work started, and large-scale market promotion.",
            twojs: "Listed on Uniswap exchange",
            threejs:
              "Gradually launched on mainstream exchanges; a decentralized, web3.0, and AI-integrated decentralized platform began to be built.",
            fourjs:
              "The collective trading agreement is launched, the mortgage lending platform is launched, the derivatives trading platform is launched, and more functions continue to be launched.",
          },
          xinxi: {
            titlea: "ZKS network protocol",
            titleb: "Jointly build Ethereum’s second-layer network",
            jj: "OVER 200 PROJECTS FROM CHAINLINK, Uniswap, SushiSwap, Aave, ARGENT, GNOSIS, CURVEAND MANY OF THE WORLD'S LARGEST BRANDS HAVE REGISTERED THEIR INTEREST TO DEPLOY ON ZKS. EXPLORE THE ECOSYSTEM SHAPING THE INTERNET USING ETHEREUM AND ZK TECHNOLOGY.",
          },
        };
        this.zhEn = !this.zhEn;
      } else {
        this.option1 = [
          { text: "首页", value: 0 },
          { text: "空投", value: 1 },
          { text: "预售", value: 2 },
          { text: "ZKS API", value: 3 },
          { text: "zkEVM", value: 4 },
          { text: "Documentation", value: 5 },
          { text: "Javascript SDK", value: 6 },
          { text: "Hardhat plugins", value: 7 },
          { text: "zkSync CLI", value: 8 },
        ];
        this.jianjie = {
          title: "空投倒计时",
          days: "天",
          hour: "时",
          minu: "分",
          miao: "秒",
          jj: "ZKS是以太坊二层网络的分叉币。ZKS为以太坊网络的扩展提供解决方案，打造更高效的web3+AI+元宇宙的生态系统,推动去中心化金融领域一场前所未有的革命。",
          btna: "参与空投",
          btnb: "参与预售",
        };
        this.xinxiZou = {
          x: {
            guanzhu: "关注",
            followers:
              "关注ZKS官方推特后，输入ERC20地址和你的推特用户名（例如：0x9c762dc9733***EB1693B9e770E1f52 和 @elonmusk）并提交，参与空投活动。",
            zfcp: "输入ERC20地址,例如：0x9c762dc...",
            zhanghao: "输入推特账号,例如：@elonmusk",
            tijiao: "领取空投",
            yue: "余额",
            renshu: "邀请人数",
            jilu: "ZKS代币空投总数量2亿个,每人可以领取20,000ZKS;每邀请一位好友获得10,000ZKS奖励，最多邀请18位好友。系统AI机器人实时监控，如果发现作弊行为的账号，将取消空投资格。",
            ywjilu: "邀请记录",
            tibi: "提币",
            fuzhi: "点击复制",
            lianjie: "邀请链接",
            jiangli: "奖励",
          },
          yushou: {
            title: "ZKS预售",
            one: "空投详情",
            two: "预售规则",
            three: "预售方式",
            oneNr:
              "ZKS空投总数量200,000,000, 关注ZKS官方推特后，提交ETH钱包地址和推特账号名参与空投活动。邀请一位好友奖励10,000 ZKS代币,最多邀请18位好友。空投结束后，ZKS代币将自动发送到提交的ETH钱包地址。",
            twoNr:
              "ZKS预售总数量600,000,000; 预售价格：1 ETH = 2,000,000 ZKS; 最小购买0.1ETH，最大购买10ETH; 预售时间：2023-11-05 - 2023-12-05（UTC+8）;系统根据预售顺序发送ZKS代币，如果预售超过额度，未购买成功的ETH将原路退回。",
            threeNr:
              "复制预售地址0x07DC7726bD4427f2A4a Eb279Ff2D220A179C2998，使用ETH钱包将ETH转入预售ERC20地址。注意：勿使用交易所直接提币到预售地址，否则将无法收到ZKS代币。ETH转入到预售地址后，本页面会显示您的转账记录，对应数量的ZKS代币将在1小时内自动发放到您的ETH钱包。",
            jieshao:
              "使用您的钱包发送ETH到下面预售地址，我们系统将自动将相应数量的ZKS代币发送到您的钱包。预售结束后，将上线交易所并开启第一轮保价回购，ZKS的价值将会上升百倍！",
            dizhi: "预售地址",
            success: "成功",
            jiage: "预售价格：1 ETH = 2,000,000 ZKS",
          },
          tokens: {
            title: "ZKS经济模型",
            jj: "ZKS总量是1,000,000,000枚，空投奖励200,000,000枚，社区预售600,000,000枚，剩余200,000,000投入项目后续发展。空投结束后将上线交易所Uniswap、Binance、OKEX等。",
            fuhao: "代币符号",
            dizhi: "合约地址",
            shudian: "小数点",
            fxl: "发行量",
            qkl: "区块链",
          },
          map: {
            title: "路线图",
            one: "第一阶段",
            two: "第二阶段",
            three: "第三阶段",
            four: "第四阶段",
            oneTime: "2023年11月",
            twoTime: "2023年12月",
            threeTime: "2024年2月",
            fourTime: "2024年4月",
            onejs: "开始ZKS空投和预售，市场准备工作启动，大规模市场推广",
            twojs: "上线Uniswap交易所",
            threejs:
              "逐步上线主流交易所；去中心化，web3.0，AI集一体的去中心化平台开始构建",
            fourjs:
              "上线集合交易协议，上线抵押借贷平台，上线衍生活交易平台，更多功能持续上线",
          },
          xinxi: {
            titlea: "ZKS的网络协议",
            titleb: "共同构建以太坊的二层网络",
            jj: "来自CHAINLINK、Uniswap、SushiSwap、Aave、ARGENT、GNOSIS、CURVE和许多世界上最大的品牌的200多个项目已登记有意在ZKS上部署。探索使用以太坊和ZK技术塑造互联网的生态系统。",
          },
        };
        this.zhEn = !this.zhEn;
      }
    },
    onCopy(message) {
      let inputDom = document.createElement("input"); // 创建一个input元素
      inputDom.setAttribute("readonly", "readonly"); // 防止手机上弹出软键盘
      inputDom.value = message; // 给input元素赋值
      document.body.appendChild(inputDom); // 添加到body
      inputDom.select(); //选中input元素的内容
      document.execCommand("Copy"); // 执行浏览器复制命令
      inputDom.style.display = "none";
      inputDom.remove(); // 移除input元素
      this.$toast.success("复制到剪贴板成功");
      // Toast('复制到剪贴板成功');
    },
  },
  mounted() {
    // 判断是移动端还是PC段
    if (document.body.clientWidth < 768) {
      this.jd = 24;
      this.buzou = 24;
      this.showtab = false;
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep .van-col {
  padding: 0px 10px;
}
.gradient-border {
  position: relative;
  overflow: hidden;
  max-width: 414px;
}
.fd {
  display: flex;
}
.gradient-border::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-image: linear-gradient(to right, #0a1126, #aaa, #0a1126);
}
.xmlist {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .xmlist_right {
    width: 414px;
  }
  img {
    margin-right: 14px;
    width: 24px;
    height: 24px;
  }
  .son {
    color: #fff;
    font-size: 20px;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;

    .son_sj {
      color: #aaa;
    }
  }
  .xian {
    width: 100%;
  }
}
.quan {
  margin-top: 40px;
  padding: 31px;
  box-sizing: border-box;
  border: 1px solid #2ea1ff;
  border-radius: 8px;
  width: 80%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .qson {
    width: 45%;
    margin-bottom: 13px;
  }
  .jltime {
    color: #fff;
    font-size: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .ma {
    font-size: 18px;
    margin-top: 8px;
  }
}
.from {
  // display: flex;
  .from_left {
    .put {
      border-radius: 4px;
      border: 2px solid #fff;
      padding: 15px 24px;
      box-sizing: border-box;
      background: none;
      width: 600px;
      margin-right: 80px;
      background-color: #0a1126 !important;
    }
    .put::placeholder {
      color: #aaaaaa;
    }
    .jj {
      margin: 24px 0 20px 0;
      font-size: 15px;
    }
  }
  .from_right {
    margin-top: 47px;
    ::v-deep .van-button--normal {
      width: 414px;
    }
    .son {
      font-size: 20px;
      max-width: 414px !important;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      padding: 10px 0;
      .son_sj {
        color: #aaaaaa;
      }
    }
    // .xian {
    //   width: 414px;
    //   margin: 10px 0;
    // }
    .yaoqing {
      display: flex;
      align-items: center;
      margin: 14px 0 21px 0;
      font-size: 16px;
      flex-wrap: wrap;
      img {
        width: 20px;
        height: 20px;
        margin-right: 12px;
      }
      .btnfz {
        cursor: pointer;
        color: #aaaaaa;
        font-size: 16px;
      }
    }
  }
  .jilu {
    .jl_header {
      img {
        width: 27px;
        height: 27px;
      }
      font-size: 18px;
      display: flex;
      align-items: center;
      color: #fff;
      .title {
        margin: 0 20px;
      }
    }
    .jlbox {
      display: flex;
      flex-wrap: wrap;
      width: 70%;
      margin-bottom: 100px;
      img {
        width: 27px;
        height: 27px;
        margin-right: 20px;
      }
      .jlson {
        display: flex;
        align-items: center;
        margin-top: 15px;
        font-size: 17px;
        width: 50%;
        .ma {
          color: #aaaaaa;
          margin-top: 6px;
        }
      }
    }
  }
}
.hezi {
  .imgx {
    width: 5%;
    height: 60px;
    margin-right: 40px;
    img {
      width: 60px;
      height: 100%;
    }
  }

  .shuju {
    display: flex;
    align-items: center;
    .name {
      color: #2ea1ff;
      font-size: 30px;
      font-weight: 600;
    }
    img {
      width: 25px;
      height: 25px;
      margin: 0 50px 0 20px;
    }
  }
  .bq {
    color: #aaaaaa;
    font-size: 20px;
    margin: 10px 0 20px 0;
  }
  .zi {
    margin-bottom: 32px;
    color: #fff;
    .shuzi {
      font-size: 20px;
      margin-right: 19px;
    }
    .yinwen {
      font-size: 18px;
    }
  }

  .fz {
    display: flex;
    align-items: center;
    .ys {
      font-size: 22px;
      color: #2ea1ff;
    }
    .btnfz {
      font-size: 20px;
    }
    img {
      width: 32px;
      height: 32px;
      margin: 0 16px 0 30px;
    }
  }
  .kuang {
    border-radius: 8px;
    border: 1px solid #2ea1ff;
    padding: 16px 32px;
    box-sizing: border-box;
    margin-bottom: 32px;
    .jd_name {
      font-size: 22px;
      color: #2ea1ff;
      margin-bottom: 18px;
    }
    .jd_jj {
      margin: 0;
    }
  }
  .maxtitle {
    color: #2ea1ff;
    font-size: 25px;
    margin-bottom: 59px;
  }
  .jj {
    color: #fff;
    font-size: 16px;
    margin-bottom: 41px;
    line-height: 1.5;
    width: 50%;
  }
  margin-left: 60px;
  .jd_name {
    color: #aaaaaa;
    font-size: 20px;
    margin-bottom: 20px;
  }
  .jd_time {
    color: #2ea1ff;
    font-size: 20px;
    font-weight: 600;
    margin: 5px 0 28px 0;
  }
  .jd_jj {
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .son {
    img {
      width: 24px;
      height: 24px;
      margin-right: 14.3px;
    }
  }
}
::v-deep .van-steps {
  background-color: rgb(255 255 255 / 0%);
}
::v-deep .van-step--vertical {
  line-height: 21px;
}
.van-step--vertical:not(:last-child)::after {
  border: none;
}
::v-deep .van-step__line {
  background-color: #2da1ff;
}
::v-deep .van-icon__image {
  font-size: 30px;
}
.van-steps--vertical {
  padding: 10px 0 0 45px;
  font-size: 30px;
}
.box {
  // border-top-left-radius: 80px;
  // border-top-right-radius: 80px;
  // border-top: 2px solid #2ea1ff;
  // background-color: #0a1126;
  margin-top: 100px;
  position: relative;
  z-index: 2;
  padding-bottom: 100px;
  box-sizing: border-box;

  .biaoti {
    color: #2ea1ff;
    text-align: center;
    .jianjie {
      color: #aaaaaa;
      font-size: 16px;
      margin-top: 72px;
      line-height: 1.4;
      width: 80%;
      margin: 0 auto;
    }
  }
}

.xinxi {
  background-color: #0a1126;
  position: relative;
  overflow: hidden;
  .bg {
    width: 83%;
    // height: 776px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    object-fit: cover;
  }
  .djs {
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    z-index: 2;
    .djs_left {
      color: #2ea1ff;
      font-size: 22px;
      display: flex;
      align-items: center;
      margin-right: 90px;
      img {
        width: 39.96px;
        height: 47.07px;
        margin-right: 12px;
      }
    }
    .djs_right {
      display: flex;
      flex-wrap: wrap;
      .timeson {
        padding: 19px 23px;
        box-sizing: border-box;
        text-align: center;
        border-radius: 12px;
        border: 2px solid #2ea1ff;
        border-bottom: 8px solid #2ea1ff;
        margin-right: 18px;
        margin-top: 18px;
        min-width: 90px;
        .shu {
          font-size: 30px;
          color: #2ea1ff;
          margin-bottom: 15px;
        }
        .danwei {
          color: #aaaaaa;
          font-size: 20px;
        }
      }
    }
  }
  .btn {
    color: #000 !important;
    position: relative;
    z-index: 5;
  }
  .title {
    margin-top: 74px;
    margin-bottom: 39px;
    color: #2ea1ff;
    font-size: 35px;
    font-weight: 600;
  }
}
footer {
  width: 100%;
  padding: 119.2px 0 57.8px 0;
  box-sizing: border-box;
  background-color: #0a1126;
  border-top: 2px solid #2da1ff;
  .imgs {
    max-width: 474px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    img {
      width: 40px;
      height: 40px;
    }
  }
}
.contIndexClass {
  width: 100%;
  height: 100%;
  .headClass {
    width: 100%;
    height: 60px;
    background: #0a1126;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;
    .headlogoClass {
      width: 116px;
    }
    .headtab {
      width: 60%;
    }
    .head_left {
      display: flex;
      align-items: center;
      width: 60%;
      img {
        margin-right: 100px;
      }
    }
    .head_right {
      color: #fff;
      font-size: 18px;
      // width: 130px;
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 30px;
        height: 26px;
        margin-right: 16px;
      }
    }
  }
}

/* 移动端 */
@media screen and (max-width: 768px) {
  .headlogoClass {
    margin-left: 1%;
  }
  .fd {
    display: flex;
    flex-wrap: wrap;
  }
  .quan {
    width: 100%;
    padding: 20px;
    .qson {
      width: 100%;
      .jltime {
        font-size: 15px;
      }
    }
  }
  .jilu {
    img {
      width: 27px;
      height: 27px;
    }
    .jl_header {
      width: 100%;
      font-size: 17px !important;
      display: flex;
      align-items: center;
    }
    .jlbox {
      display: flex;
      flex-wrap: wrap;

      img {
        width: 27px;
        height: 27px;
        margin: 0 !important;
      }
      .jlson {
        display: flex;
        align-items: center;
        margin-top: 15px;
        font-size: 15px !important;
        width: 100% !important;
        .ma {
          color: #aaaaaa;
          margin-top: 6px;
        }
      }
    }
  }
  .headClass {
    .head_left {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: auto !important;
      img {
        margin-right: 5px !important;
      }
    }
  }
  ::v-deep .van-dropdown-menu__title {
    color: #fff;
  }
  ::v-deep .van-dropdown-menu__item {
    background-color: #0a1126;
    border: none;
    min-width: 80px;
  }
  .hezi {
    margin-left: 30px;
    .jj {
      width: 100%;
    }
    .fz {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .btnfz {
        font-size: 14px;
      }
      .ys {
        font-size: 15px;
        color: #2ea1ff;
      }
      img {
        width: 20px;
        height: 20px;
        margin: 0 8px 0 15px;
      }
    }
  }
  .xmlist {
    display: flex;
    align-items: center;
    .xmlist_right {
      width: 100%;
    }
    .son {
      font-size: 18px;
    }
  }
  .neijj {
    padding: 70px 60px 100px 60px;
    box-sizing: border-box;
  }
  .xinxi {
    .neirong {
      font-size: 15px;
      color: #fff;
      margin-bottom: 51px;
      position: relative;
      z-index: 10;
      width: 100%;
    }
    .bg {
      width: 100%;
      height: 776px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      object-fit: cover;
    }
    .title {
      position: relative;
      z-index: 10;
    }
  }
  .box {
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    margin-top: -100px;
    position: relative;
    z-index: 10;
    padding: 108px 0px;
    box-sizing: border-box;
    // .list {
    //   display: flex;
    //   flex-wrap: wrap;
    .from_right {
      width: 100%;
      margin-top: 20px;
      .son {
        width: 100% !important;
        margin-bottom: 10px;
      }
    }
    .shuju {
      img {
        margin: 10px 20px;
      }
    }
    .put {
      width: 100% !important;
      background-color: #0a1126 !important;
    }
    .from {
      // display: flex;
      // flex-wrap: wrap;
      ::v-deep .van-button--normal {
        width: 100% !important;
      }
    }
    .jianjie {
      width: 100% !important;
    }
  }
  // }
  footer {
    width: 100%;
    padding: 119.2px 0 57.8px 0;
    box-sizing: border-box;
    background-color: #0a1126;
    border-top: 2px solid #2da1ff;
    .imgs {
      max-width: 300px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
}
/* PC端 */
@media screen and (min-width: 768px) {
  .headlogoClass {
    margin-left: 3%;
  }
  .xinxi {
    padding: 70px 60px 210px 60px !important;
    box-sizing: border-box;
    .neirong {
      font-size: 18px;
      color: #fff;
      margin-bottom: 51px;
      width: 50% !important;
    }
  }
}
</style>
